<template>
	<div id="Home">
		<div id="homeTop">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(item,index) in focus" :key="index">
					<img :src="item.imageUrl" style="width: 100%; height: 100%;" />
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div id="homeNav" class="Nav">
			<ul>
				<li v-for="(item,index) in topNav" @click="push(item),selectedIndex=index" :style="{color:index == selectedIndex?'red':'black'}"
				 :key="index">{{item.name}}</li>
			</ul>
		</div>
		<div id="homeContent">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	import 'swiper/css/swiper.css'
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
	// var nav = document.getElementsByClassName('Nav');
	// console.log(nav.out)
	export default {
		components: {
			swiper,
			swiperSlide
		},
		data() {
			return {
				selectedIndex: 0,
				topNav: [{
						name: "精选"
					},
					{
						name: "优惠"
					},
					{
						name: "海淘"
					},
					{
						name: "发现"
					},
					{
						name: "原创"
					},
				],
				swiperOption: {
					spaceBetween: 30,
					centeredSlides: true,
					autoplay: {
						delay: 2500,
						disableOnInteraction: false
					},
					pagination: {
						el: '.swiper-pagination',
						dynamicBullets: true
					}
				},
				focus: []
			}
		},
		mounted() {
			this.$http.get(this.$apis.zhImg).then((resp) => {
				this.focus = resp.data.focus;
			})
		}
	}
</script>

<style lang="scss" scoped>
	#Home {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 40px;
		background: lightgray;

		#homeTop {
			width: 100%;
			height: auto;
		}

		.Nav {
			width: 100%;
			height: 40px;
			background: white;
			border: 1px solid lightgray;
			display: flex;
			justify-content: center;
			align-items: center;

			ul {
				width: 100%;
				height: 100%;
				display: flex;

				li {
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
				}
			}
		}

		#homeContent {
			width: 100%;
			height: auto;
		}
	}
</style>
